<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
		
		<style type="text/css">
			.box{
				width: 950px;
				margin: 0px auto;
				overflow: hidden;
			}
			.box .imgbox{
				width: 300px;
				height: 300px;
				float: left;
				margin-right: 15px;
				margin-bottom: 15px;
				background: url(images/loading.gif);
				background-size:cover;
			}
			.box .imgbox img{
				width: 300px;
				height: 300px;
			}
			.bor{
				/*border: 5px solid blue;*/
			}
		</style>
		<script type="text/javascript">
			$(function(){
//				获得浏览器的高度
				var wh  = $(window).height();
				
				$(document).scroll(function(){
//					获取滚动条高度
					var Stop = $(document).scrollTop();
					
					$('.imgbox').each(function(){
//						获取当前元素距离文档顶部的的距离
						var top = $(this).offset().top;
//						获取当前元素的高度
						var h = $(this).outerHeight();
//						存取$this
						var jqthis = $(this)
//						判断当前元素是否在可视区域范围之内
						if(top>=Stop&&top<=Stop+wh){
							setTimeout(function(){
								//							获取图地址
								var img = jqthis.attr('data-img')
	//							设置图片地址
								jqthis.find('img').attr('src',img)
							},500)

						}
//						判断当前元素是否在可视区域范围之内
						if(top<Stop&&top+h>=Stop){
							setTimeout(function(){
		//							获取图地址
								var img = jqthis.attr('data-img')
	//							设置图片地址
								jqthis.find('img').attr('src',img)
							},500)
						}
						
					})
				})
				
			})
		</script>
	</head>
	<body>
		<div class="box">
			<!--div.imgbox[data-img=images/$.jpg]*30>img-->
			<div class="imgbox bor" data-img="images/01.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/02.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/03.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/04.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/05.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/06.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/07.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/08.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/09.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/10.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/11.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/12.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/13.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/14.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/15.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/16.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/17.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/18.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/19.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/20.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/21.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/22.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/23.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/24.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/25.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/26.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/27.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/28.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/29.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/30.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/01.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/02.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/03.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/04.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/05.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/06.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/07.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/08.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/09.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/10.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/11.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/12.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/13.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/14.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/15.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/16.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/17.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/18.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/19.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/20.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/21.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/22.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/23.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/24.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/25.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/26.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/27.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/28.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/29.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/30.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/01.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/02.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/03.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/04.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/05.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/06.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/07.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/08.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/09.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/10.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/11.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/12.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/13.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/14.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/15.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/16.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/17.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/18.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/19.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/20.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/21.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/22.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/23.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/24.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/25.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/26.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/27.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/28.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/29.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/30.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/01.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/02.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/03.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/04.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/05.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/06.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/07.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/08.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/09.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/10.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/11.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/12.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/13.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/14.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/15.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/16.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/17.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/18.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/19.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/20.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/21.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/22.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/23.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/24.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/25.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/26.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/27.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/28.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/29.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/30.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/01.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/02.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/03.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/04.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/05.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/06.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/07.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/08.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/09.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/10.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/11.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/12.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/13.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/14.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/15.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/16.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/17.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/18.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/19.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/20.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/21.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/22.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/23.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/24.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/25.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/26.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/27.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/28.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/29.jpg"><img src="" alt="" /></div>
			<div class="imgbox" data-img="images/30.jpg"><img src="" alt="" /></div>
			
		</div>
	</body>
</html>
